<template>
  <div>
    <div class="zichan-msg-1">
      <div class="zichan-msg-1-1">{{Amount}} (USDT)</div>
      <div class="zichan-msg-1-2">{{props.queryDividend}}</div>
    </div>
    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2"  @click="dialogToggleCashOut">
        {{WithdrawCoinsCashAccount}}
      </div>
    </div>

    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2" @tap="dialogTogglePledge">
        {{CashAccount}}
      </div>
    </div>
    <div class="zichan-msg-2-1-1">
      {{Deduct}}
    </div>

    <!--    提幣金額-->
    <uni-popup ref="dialogMsgCashOut" type="dialog" @touchmove.stop.prevent="moveHandle" :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">{{WithdrawCoinsCashAccount}}</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              {{Amount}}
            </div>
            <div class="recharage-4-3">
              <el-input v-model.number="queryUSDTNum" class="recharage-4-4-1" :placeholder="cancelEn"></el-input>
            </div>
          </div>
        </div>

        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="dialogCloseCashOutBtn">
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="dialogConfirmCashOutBtn">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>
      </div>
    </uni-popup>

    <!--    質押金額-->
    <uni-popup ref="dialogMsgPledge" type="dialog" @touchmove.stop.prevent="moveHandleZhiYa" :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">{{WithdrawCoinsCashAccount}}</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              {{Amount}}
            </div>
            <div class="recharage-4-3">
              <el-input v-model.number="queryUSDTNumZhiYa" class="recharage-4-4-1" :placeholder="cancelEn"></el-input>
            </div>
          </div>
        </div>

        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="dialogClosePledgeBtn">
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="dialogConfirmPledgeBtn">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>
      </div>
    </uni-popup>

  </div>
</template>
<script setup>
import { ref,defineEmits, defineProps, watch, computed, reactive,onUnmounted } from 'vue';
import {MyBonus,MyBonusPledge} from '@/api/zichan'
import {onShow} from "@dcloudio/uni-app";
let props = defineProps({
  queryDividend:{
    type:Number,
    default:0
  }
})
let emit = defineEmits(['dialogRechargeMsg'])
let queryUSDTNum = ref(null);
let query = reactive({});

let queryUSDTNumZhiYa = ref(null);
let queryZhiYa = reactive({});

let cancel = ref('取消');
let confirm = ref('确定');
let Amount = ref('余額')
let WithdrawCoinsCashAccount = ref('提幣到現金賬户')
let CashAccount = ref('質押')
let cancelEn = ref('请输入100的整数倍');
let Deduct = ref('扣除10%手续费');

const moveHandle = (e) => {
  return false
}

const moveHandleZhiYa = (e) => {
  return false
}

//提现
let dialogMsgCashOut = ref(null);

//质押
let dialogMsgPledge = ref(null);
/*
* 提现
* */
const dialogToggleCashOut = ()=>{
  dialogMsgCashOut.value.open();
}
const dialogConfirmCashOutBtn = ()=>{
  if(queryUSDTNum.value % 100 === 0){
    queryUSDTNum.value = queryUSDTNum.value;
    query = Object.assign(query,{amount:queryUSDTNum.value})
    MyBonus(query).then(res=>{
      if(res.data.code === 200){
        uni.showToast({
          icon: 'success',
          duration: 2000
        });
      }else{
        uni.showToast({
          icon: 'error',
        })
      }
    }).catch(error=>{

    })
  }else{
    queryUSDTNum.value = null;
    return
  }
  closeDialogMsgCashOut();
}
const dialogCloseCashOutBtn = ()=>{
  closeDialogMsgCashOut();
}

const closeDialogMsgCashOut=()=>{
  emit('dialogRechargeMsg')
  dialogMsgCashOut.value.close();
  queryUSDTNum.value = null;
}

/*
* 质押 Pledge
* */

const dialogTogglePledge = ()=>{
  dialogMsgPledge.value.open();
}
const dialogConfirmPledgeBtn = ()=>{
  if(queryUSDTNumZhiYa.value % 100 === 0){
    queryUSDTNumZhiYa.value = queryUSDTNumZhiYa.value;
    queryZhiYa = Object.assign(query,{amount:queryUSDTNumZhiYa.value})
    MyBonusPledge(queryZhiYa).then(res=>{
      if(res.data.code === 200){
        uni.showToast({
          icon: 'success',
          duration: 2000
        });
      }else{
        uni.showToast({
          icon: 'error',
        })
      }
    }).catch(error=>{

    })
  }else{
    queryUSDTNumZhiYa.value = null;
    return
  }
  closeDialogMsgPledge();
}
const dialogClosePledgeBtn = ()=>{
  closeDialogMsgPledge();
}

const closeDialogMsgPledge=()=>{
  emit('dialogRechargeMsg')
  dialogMsgPledge.value.close();
  queryUSDTNumZhiYa.value = null;
}



onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    cancel.value = '取消';
    confirm.value = '确定';
    Amount.value = '余额'
    WithdrawCoinsCashAccount.value = '提币到现金账户'
    CashAccount.value = '质押'
    cancelEn.value = '请输入100的整数倍';
    Deduct.value = '扣除10%手续费';
  }
  if(lang === 'Eng'){
    cancel.value = 'Cancel';
    confirm.value = 'Confirm';
    Amount.value = 'Balance'
    WithdrawCoinsCashAccount.value = 'Withdraw Coins Cash Account'
    CashAccount.value = 'Cash Account'
    cancelEn.value = 'Please enter 100 integer multiples';
    Deduct.value = 'Deduct 10% handling fee';
  }
  if (lang === '日本語'){
    cancel.value = 'キャンセル';
    confirm.value = '確認';
    Amount.value = '残高'
    WithdrawCoinsCashAccount.value = '現金口座に出金'
    CashAccount.value = '質押'
    cancelEn.value = '100入金先住所を入力してください';
    Deduct.value = '手数料10%控除';
  }
  if (lang === '한국어'){
    cancel.value = '취소';
    confirm.value = '확인';
    Amount.value = '잔액'
    WithdrawCoinsCashAccount.value = '현금 계좌 를 이체 하다'
    CashAccount.value = '이체 하다'
    cancelEn.value = '100입금주소를 입력하십시오.';
    Deduct.value = '수수료 10% 를 공제 하다';
  }
})

</script>

<style scoped>
.zichan-msg-2-1-1{
  width: 90%;
  margin: 0 auto;
  padding-top: 300px;
  color: #467CD1;
  text-align: center;
  box-sizing: border-box;
}
.recharage-4-4-1{
  width: 90%;
}
:deep(.el-input__wrapper){
  background-color: #F8F8F8;
  border-radius: 2px;
  color: #FFFFFF;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
:deep(.el-input__inner){
  color: #000000;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
.recharage-1{
  width: 80vw;
  height: auto;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 10px;
}
.recharage-1-1{
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.recharage-1-2{
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-2{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
}
.recharage-4-2{
  font-size: 16px;
  width: 90%;
  margin: 0 auto;
  color: #FFFFFF;
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-4-3{
  font-size: 16px;
  padding-top: 30px;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
}
.recharage-4-4{
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 10px;
}
.recharage-3{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
  height: 50px;
  line-height: 50px;
  //background: #EBEBEB;
  //border-radius: 10px;
  text-align: center;
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.recharage-3-1{
  margin-top: 10px;
}
.recharage-4-1{
  margin-top: 20px;
  color: #FFFFFF;
}
.recharage-4{
  background-image:url("../../../static/jiaoyi/zichan/10.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  height: 150px;
  //background: #EBEBEB;
  border-radius: 10px;
}
.recharage-5{
  display: flex;
  justify-content: space-evenly;

}
.recharage-5-1{
  margin-top: 20px;
}
.recharage-5-1-1{
  width: 43%;
  text-align: center;
  color: #000000;
  background: #EBEBEB;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.recharage-5-1-2{
  color: #FFFFFF;
  text-align: center;
  width: 43%;
  background: #2A54A0;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.zichan-msg-1{
  background-image: url("../../../static/jiaoyi/zichan/3.png");
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 90%; /* 或其他尺寸 */
  height: 18vh; /* 或其他尺寸 */
  border-radius: 10px;
  margin: 0 auto;
  color: #FFFFFF;
}
.zichan-msg-1-1{
  font-size: 16px;
  padding:30px;
  box-sizing: border-box;
}
.zichan-msg-1-2{
  font-size: 16px;
  padding-left:30px;
  box-sizing: border-box;
}
.zichan-msg-2-1{
  margin-top: 40px;
}

.zichan-msg-2{
  background-color: #FFFFFF;
  width: 90%;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
}


</style>